<#include "/common/_layout.html"/>
<@layout>
	<link rel="stylesheet" href="${ctx}/platform/home.css" />
	<div id="app">
		<el-row class="container">
			<el-col :span="24" class="main">
				<!--左侧菜单-->
				<el-col class="menu">
					<aside>
						<div style="background-color: #20a0ff;" align="center">
							<el-dropdown trigger="hover" style="cursor:pointer;">
								<span class="el-dropdown-link userinfo-inner">
									<img :src="sysUserAvatar" /> {{sysUserName}}
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item @click.native="modifyPwd">修改密码</el-dropdown-item>
									<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<el-menu default-active="99998" @select="menuSelect" :unique-opened="true">
							<a target="content-iframe" href="${ctx}/main">
								<el-menu-item index="99998">
									<i class="fa fa-home"></i>首页
								</el-menu-item>
							</a>

							<el-submenu index="1">
								<template slot="title">
									<i class="fa fa-cogs"></i>商品管理
								</template>
								<a target="content-iframe" href="${ctx}/goodsBrand">
									<el-menu-item index="1-1">品牌管理</el-menu-item>
								</a>
								<a target="content-iframe" href="${ctx}/goodsType">
									<el-menu-item index="1-2">类型管理</el-menu-item>
								</a>
								<a target="content-iframe" href="${ctx}/goods">
									<el-menu-item index="1-3">商品管理</el-menu-item>
								</a>
							</el-submenu>
							<el-submenu index="9">
								<template slot="title"><i class="fa fa-cogs"></i>客户管理</template>
								<a target="content-iframe" href="${ctx}/customer">
									<el-menu-item index="9-1">我的客户</el-menu-item>
								</a>
							</el-submenu>
							<el-submenu index="10">
								<template slot="title"><i class="fa fa-cogs"></i>系统管理</template>
								<a target="content-iframe" href="${ctx}/user">
									<el-menu-item index="10-1">用户管理</el-menu-item>
								</a>
							</el-submenu>
						</el-menu>
					</aside>
				</el-col>
				<!--右侧内容-->
				<el-col class="content">
					<section>
						<iframe src="${ctx}/main" id="content-iframe" name="content-iframe" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; width: 100%; height: 100%;" scroll="no"></iframe>
					</section>
				</el-col>

			</el-col>
		</el-row>

		<el-dialog title="修改密码" :visible="modifyDialog.dialogVisible" width="450px" @open="onOpen('modifyDialog','${ctx}/user/modifyPwd')" @close="onClose('modifyDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="modifyDialog" :src="modifyDialog.url" frameborder="0" style="margin: 0 0 20px 0; padding: 0px; overflow: hidden; height: 250px;width: 100%;" scroll="no"></iframe>
		</el-dialog>
	</div>

	<script type="text/javascript">
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					modifyDialog: {
						dialogVisible: false,
						url: ""
					},
					sysUserName: '${user.name}',
					sysUserAvatar: '${ctx}/common/images/ic_avart_baby_girl.png'
				}
			},
			methods: $.extend(commonMethods, {
				//退出登录
				logout: function() {
					var _this = this;
					this.$confirm('确认退出吗?', '提示', {
						type: 'warning',
						callback: function(action, instance) {
							if(action == "confirm") {
								window.location = "${ctx}/logout";
							}
						}
					});
				},
				modifyPwd: function() {
					this.modifyDialog.dialogVisible = true;
				},
				menuSelect: function() {}
			}),
			mounted: function() {
				//				var user = sessionStorage.getItem('userSession');
				//				if(user) {
				//					user = JSON.parse(user);
				//					this.sysUserName = user.name || '';
				//					this.sysUserAvatar = user.avatar || '';
				//				}

			}
		});
	</script>
</@layout>